VCCWでIemotoを使ったWordPressテーマ作成

VCCWでIemotoを使ったWordPressテーマ作成

#WordPress
野中 龍一

野中 龍一

facebook logohatena logotwitter logo
Clock Icon2014.11.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

以前、Gruntを使ったテーマ開発環境を作るという記事でVCCWを開発しているmiya0001さんにiemotoを紹介いただいたので、実際にインストールして使えるところまで試してみました。

VCCWについて

VCCWについてはこちらの記事Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」を参考にどうぞ。

Iemotoについて

Iemotoは_s(underscores)というスターターテーマをベースとしたGrunt/Gulpテンプレートです。

仮想環境にSSH接続する

すでにVagrant環境及びVCCWをインストールし$ vagrant upが実行可能という前提で進めます。まずは仮想環境にSSH接続しましょう。

$ vagrant up
$ vagrant ssh
[vagrant@wordpress ~]$

ここからはすべて仮想環境でコマンドを実行します。

テーマ作る

テーマディレクトリに移動し適当にディレクトリを作ります。

$ cd /var/www/wordpress/wp-content/themes/
$ mkdir test

iemotoのインストール

VCCWにはrbenv, bundler, node.js, grunt-cliがインストール済みです。grunt-initコマンドで_sベースのスターターテーマを生成します。

$ grunt-init iemoto
[?] Project title (Iemoto) test
[?] PHP function prefix (alpha and underscore characters only) (iemoto)
[?] Description (This is a awesome cool theme.)
[?] Project homepage (https://example.com/) http://test.io/
[?] Author name nukos.kitchen
[?] Author url (https://example.com/) http://whiskers.nukos.kitchen/
[?] Use gulp? (y/N) N
[?] Do you need to make any changes to the above before continuing? (y/N) N

設定入力後、確認をスキップするとテーマファイルが生成されます。Gruntを使いたい方は[?] Use gulp? (y/N)をNにします（そろそろGulpも使おうと思う）。

  { '.gitignore': 'iemoto/root/.gitignore',
  '.jshintrc': 'iemoto/root/.jshintrc',
  '404.php': 'iemoto/root/404.php',
  'Gruntfile.js': 'iemoto/root/Gruntfile.js',
  'README.md': 'iemoto/root/README.md',
  'archive.php': 'iemoto/root/archive.php',
  'comments.php': 'iemoto/root/comments.php',
  'content-none.php': 'iemoto/root/content-none.php',
  'content-page.php': 'iemoto/root/content-page.php',
  'content-search.php': 'iemoto/root/content-search.php',
  'content-single.php': 'iemoto/root/content-single.php',
  'content.php': 'iemoto/root/content.php',
  'footer.php': 'iemoto/root/footer.php',
  'functions.php': 'iemoto/root/functions.php',
  'gulpfile.js': 'iemoto/root/gulpfile.js',
  'header.php': 'iemoto/root/header.php',
  'inc/custom-header.php': 'iemoto/root/inc/custom-header.php',
  'inc/customizer.php': 'iemoto/root/inc/customizer.php',
  'inc/extras.php': 'iemoto/root/inc/extras.php',
  'inc/jetpack.php': 'iemoto/root/inc/jetpack.php',
  'inc/template-tags.php': 'iemoto/root/inc/template-tags.php',
  'index.php': 'iemoto/root/index.php',
  'js/customizer.js': 'iemoto/root/js/customizer.js',
  'js/iemoto.js': 'iemoto/root/js/iemoto.js',
  'js/navigation.js': 'iemoto/root/js/navigation.js',
  'js/skip-link-focus-fix.js': 'iemoto/root/js/skip-link-focus-fix.js',
  'languages/_s.pot': 'iemoto/root/languages/_s.pot',
  'languages/ja.mo': 'iemoto/root/languages/ja.mo',
  'languages/ja.po': 'iemoto/root/languages/ja.po',
  'languages/readme.txt': 'iemoto/root/languages/readme.txt',
  'page.php': 'iemoto/root/page.php',
  'rtl.css': 'iemoto/root/rtl.css',
  'sass/_reset.scss': 'iemoto/root/sass/_reset.scss',
  'sass/editor-style.scss': 'iemoto/root/sass/editor-style.scss',
  'sass/elements/_elements.scss': 'iemoto/root/sass/elements/_elements.scss',
  'sass/elements/_lists.scss': 'iemoto/root/sass/elements/_lists.scss',
  'sass/elements/_tables.scss': 'iemoto/root/sass/elements/_tables.scss',
  'sass/forms/_buttons.scss': 'iemoto/root/sass/forms/_buttons.scss',
  'sass/forms/_fields.scss': 'iemoto/root/sass/forms/_fields.scss',
  'sass/forms/_forms.scss': 'iemoto/root/sass/forms/_forms.scss',
  'sass/layout/_content-sidebar.scss': 'iemoto/root/sass/layout/_content-sidebar.scss',
  'sass/layout/_sidebar-content.scss': 'iemoto/root/sass/layout/_sidebar-content.scss',
  'sass/media/_captions.scss': 'iemoto/root/sass/media/_captions.scss',
  'sass/media/_galleries.scss': 'iemoto/root/sass/media/_galleries.scss',
  'sass/media/_media.scss': 'iemoto/root/sass/media/_media.scss',
  'sass/mixins/_mixins-master.scss': 'iemoto/root/sass/mixins/_mixins-master.scss',
  'sass/modules/_accessibility.scss': 'iemoto/root/sass/modules/_accessibility.scss',
  'sass/modules/_alignments.scss': 'iemoto/root/sass/modules/_alignments.scss',
  'sass/modules/_clearings.scss': 'iemoto/root/sass/modules/_clearings.scss',
  'sass/modules/_infinite-scroll.scss': 'iemoto/root/sass/modules/_infinite-scroll.scss',
  'sass/navigation/_links.scss': 'iemoto/root/sass/navigation/_links.scss',
  'sass/navigation/_menus.scss': 'iemoto/root/sass/navigation/_menus.scss',
  'sass/navigation/_navigation.scss': 'iemoto/root/sass/navigation/_navigation.scss',
  'sass/site/_site.scss': 'iemoto/root/sass/site/_site.scss',
  'sass/site/primary/_asides.scss': 'iemoto/root/sass/site/primary/_asides.scss',
  'sass/site/primary/_comments.scss': 'iemoto/root/sass/site/primary/_comments.scss',
  'sass/site/primary/_posts-and-pages.scss': 'iemoto/root/sass/site/primary/_posts-and-pages.scss',
  'sass/site/secondary/_widgets.scss': 'iemoto/root/sass/site/secondary/_widgets.scss',
  'sass/style.scss': 'iemoto/root/sass/style.scss',
  'sass/typography/_copy.scss': 'iemoto/root/sass/typography/_copy.scss',
  'sass/typography/_headings.scss': 'iemoto/root/sass/typography/_headings.scss',
  'sass/typography/_typography.scss': 'iemoto/root/sass/typography/_typography.scss',
  'sass/variables-site/_colors.scss': 'iemoto/root/sass/variables-site/_colors.scss',
  'sass/variables-site/_structure.scss': 'iemoto/root/sass/variables-site/_structure.scss',
  'sass/variables-site/_typography.scss': 'iemoto/root/sass/variables-site/_typography.scss',
  'sass/variables-site/_variables-site.scss': 'iemoto/root/sass/variables-site/_variables-site.scss',
  'screenshot.png': 'iemoto/root/screenshot.png',
  'search.php': 'iemoto/root/search.php',
  'sidebar.php': 'iemoto/root/sidebar.php',
  'single.php': 'iemoto/root/single.php',
  'style.css': 'iemoto/root/style.css' }
Writing .gitignore...OK
Writing .jshintrc...OK
Writing 404.php...OK
Writing Gruntfile.js...OK
Writing README.md...OK
Writing archive.php...OK
Writing comments.php...OK
Writing content-none.php...OK
Writing content-page.php...OK
Writing content-search.php...OK
Writing content-single.php...OK
Writing content.php...OK
Writing footer.php...OK
Writing functions.php...OK
Writing gulpfile.js...OK
Writing header.php...OK
Writing inc/custom-header.php...OK
Writing inc/customizer.php...OK
Writing inc/extras.php...OK
Writing inc/jetpack.php...OK
Writing inc/template-tags.php...OK
Writing index.php...OK
Writing js/customizer.js...OK
Writing js/iemoto.js...OK
Writing js/navigation.js...OK
Writing js/skip-link-focus-fix.js...OK
Writing languages/_s.pot...OK
Writing languages/ja.mo...OK
Writing languages/ja.po...OK
Writing languages/readme.txt...OK
Writing page.php...OK
Writing rtl.css...OK
Writing sass/_reset.scss...OK
Writing sass/editor-style.scss...OK
Writing sass/elements/_elements.scss...OK
Writing sass/elements/_lists.scss...OK
Writing sass/elements/_tables.scss...OK
Writing sass/forms/_buttons.scss...OK
Writing sass/forms/_fields.scss...OK
Writing sass/forms/_forms.scss...OK
Writing sass/layout/_content-sidebar.scss...OK
Writing sass/layout/_sidebar-content.scss...OK
Writing sass/media/_captions.scss...OK
Writing sass/media/_galleries.scss...OK
Writing sass/media/_media.scss...OK
Writing sass/mixins/_mixins-master.scss...OK
Writing sass/modules/_accessibility.scss...OK
Writing sass/modules/_alignments.scss...OK

これでテーマファイルはできました。
あとはGruntが動くようにgemやnpmのモジュールをインストールします。

Gemのインストール

すでにbundlerがインストールされているのでbundle initでGemfileを作ります。

$ bundle init
Writing new Gemfile to /var/www/wordpress/wp-content/themes/test/Gemfile

Gemfileを編集

今回はIemotoが生成するGruntfile.jsに書かれているSassやCompassを動かすために必要なgemをインストールします。$ vi GemfileでGemfileを編集します。

source "https://rubygems.org"

gem "sass"
gem "compass"

Gemfileが書けたら$ bundle installでインストールします。

$ bundle install --path=vendor/bundle

node.jsモジュールのインストール

続いてnode.jsモジュールをインストールします。すでにpackage.jsonが用意されているのでインストールコマンドを実行するだけです。

$ npm install

package.jsonの中身

{
  "name": "test",
  "title": "test",
  "description": "This is a awesome cool theme.",
  "version": "0.1.0",
  "homepage": "http://test.io/",
  "author": {
    "name": "Ryuichi Nonaka",
    "url": "http://whiskers.nukos.kitchen/"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^0.9.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-text-replace": "^0.3.12",
    "load-grunt-tasks": "^0.6.0"
  },
  "keywords": []
}

Gruntfileの修正

compassをbundler経由で実行するためにbundleExecの指定をGruntfileに追加します。

    // compass(sass)
    compass: {
      options: {
        bundleExec: true
      },
      dev: {
        options: {
          sassDir:        'sass',
          cssDir:         'css',
          imagesDir:      'images',
          outputStyle:    'expanded',
          relativeAssets: true,
          noLineComments: true,
          sourcemap:      true
        }
      },
      dist: {
        options: {
          sassDir:        'sass',
          cssDir:         './',
          imagesDir:      'images',
          outputStyle:    'expanded',
          relativeAssets: true,
          noLineComments: true,
          sourcemap:      false,
          force:          true
        }
      }
    }

Gruntの実行

Gruntを実行して下記のようにタスクが処理されれば成功です。

[vagrant@wordpress test]$ grunt
Running "jshint:dist" (jshint) task
>> 1 file lint free.

Running "compass:dev" (compass) task
directory css
    write css/editor-style.css (5.887s)
    write css/editor-style.css.map
    write css/style.css (4.584s)
    write css/style.css.map

Running "compass:dist" (compass) task
    write editor-style.css (4.436s)
    write style.css (4.268s)

Running "replace:dist" (replace) task

Done, without errors.

これでテーマ作成の準備は完了です。 あとはgrunt-contrib-watchとか入れて自分好みにカスタマイズします。

まとめ

今回は仮想環境上でGruntを動かしましたが、Sass/Compassだけでも処理に4秒write css/style.css (4.766s)かかっていたりします。自分の環境が悪いのか設定が悪いのか･･･あまり良い数字ではないですね。原因までは調べてないのでどこが悪いとか言えませんがローカルで走らせるのも1つの方法かもしれません。

この記事はVCCWでiemotoを使ったWordpressテーマ作成の転載記事です。

Share this article

facebook logohatena logotwitter logo

関連記事

EC2 + RDS 環境へインストールした WordPress 上で AWS Secrets Manager Agent 経由で DB 接続情報のシークレットを取得してみた

EC2 + RDS 環境へインストールした WordPress 上で AWS Secrets Manager Agent 経由で DB 接続情報のシークレットを取得してみた

User avatar
いわさ
2024.07.15
英語日記をAIに添削してもらいWordPressに投稿する

英語日記をAIに添削してもらいWordPressに投稿する

User avatar
kato
2024.03.27
[アップデート] Amazon Lightsail の WordPress インスタンスでカスタムドメインや SSL 構成を簡単にセットアップする機能が使えるようになりました

[アップデート] Amazon Lightsail の WordPress インスタンスでカスタムドメインや SSL 構成を簡単にセットアップする機能が使えるようになりました

User avatar
いわさ
2024.01.06
Mountpoint for Amazon S3 を利用して、WordPress のメディアファイルをオフロードしてみた

Mountpoint for Amazon S3 を利用して、WordPress のメディアファイルをオフロードしてみた

User avatar
森田力
2023.12.26
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.